// 多行隐藏
@mixin textoverflow($clamp: 1) {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $clamp;
    /*! autoprefixer: ignore next */
    -webkit-box-orient: vertical;
}
// flex布局复用
@mixin flex($hov: space-between, $col: center) {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
// 背景图片
@mixin bgImg($w: 0, $h: 0, $img: "", $size: contain) {
    display: inline-block;
    width: $w;
    height: $h;
    background: url($img) no-repeat center;
    background-size: $size;
}
// 定位
@mixin position($pos: absolute, $top: 0, $left: 0, $w: 100%, $h: 100%) {
    position: $pos;
    top: $top;
    left: $left;
    width: $w;
    height: $h;
}
// 图片定位
@mixin positionImg($pos: absolute, $top: 0, $right: 0, $w: 0, $h: 0, $img: "") {
    position: $pos;
    top: $top;
    right: $right;
    width: $w;
    height: $h;
    background: url($img) no-repeat center;
    background-size: contain;
}
// 边框
@mixin border($bw: 1px, $bc: #cccccc, $bs: solid) {
    border: $bw $bs $bc;
}
// 页面布局
@mixin page-container {
    color: #333;
    .contain-list-card {
        min-height: calc(100vh - 100px);
    }

    .contain-list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 12px;
        margin-bottom: 16px;
        border-bottom: 1px solid #e5e7ec;

        .title {
            font-size: 16px;
            font-weight: bold;
        }
    }

    .query-table {
        .table-tag {
            text-align: center;
            width: 50px;
        }

        .table-pagination {
            display: flex;
            justify-content: flex-end;
            margin-top: 16px;
        }
    }

    .query {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0 0 20px;

        .query-item {
            display: flex;
            width: 346px;
            font-size: 12px;
            margin: 5px 12px;
            align-items: center;
            justify-content: center;
        }
        .query-name {
            min-width: 120px;
            text-align: right;
            margin-right: 8px;
        }
        .query-value {
            flex: 1;
        }
        .query-config {
            margin: 0 8px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
    }
}
